<template>
  <el-drawer v-model="props.drawer" :before-close="close" title="布局配置" size="20%">
    <template #default>
      <el-scrollbar>
        <el-divider content-position="left">顶栏设置</el-divider>
        <div class="setting-bar-flex">
          <div class="setting-bar-flex-label">顶栏背景</div>
          <el-color-picker v-model="theme.headerBg" />
        </div>
        <div class="setting-bar-flex">
          <div class="setting-bar-flex-label">顶栏字体色</div>
          <el-color-picker v-model="theme.headerText" />
        </div>
        <el-divider content-position="left">侧栏设置</el-divider>
        <div class="setting-bar-flex">
          <div class="setting-bar-flex-label">侧栏背景</div>
          <el-color-picker v-model="theme.asideBg" />
        </div>
        <div class="setting-bar-flex">
          <div class="setting-bar-flex-label">侧栏字体色</div>
          <el-color-picker v-model="theme.asideText" />
        </div>
        <div class="setting-bar-flex">
          <div class="setting-bar-flex-label">侧栏停留背景色</div>
          <el-color-picker v-model="theme.asideHover" />
        </div>
        <div class="setting-bar-flex">
          <div class="setting-bar-flex-label">侧栏选中字体色</div>
          <el-color-picker v-model="theme.asideActive" />
        </div>
        <div class="copy-config">
          <el-button type="primary" @click="confirm" :auto-insert-space="false" class="config-btn" :icon="Edit">
            一键修改配置
          </el-button>
          <el-button type="info" @click="cancel" :auto-insert-space="false" class="config-btn" :icon="Refresh">
            一键恢复默认
          </el-button>
        </div>
      </el-scrollbar>
    </template>
  </el-drawer>
</template>

<script setup>
  import { Edit, Refresh } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { useUserStore } from '@/stores/user'

  const userStore = useUserStore()
  const props = defineProps({
    drawer: Boolean,
    theme: Object
  })
  const theme = ref({
    headerBg: userStore.theme.headerBg,
    headerText: userStore.theme.headerText,
    asideBg: userStore.theme.asideBg,
    asideText: userStore.theme.asideText,
    asideHover: userStore.theme.asideHover,
    asideActive: userStore.theme.asideActive
  })
  const emit = defineEmits(['close', 'confirm'])
  const close = () => {
    emit('close')
  }
  const cancel = () => {
    emit('close')
    theme.value = {
      headerBg: '#fff',
      headerText: '#333',
      asideBg: '#fff',
      asideText: '#333',
      asideHover: '#f5f7fa',
      asideActive: '#409eff'
    }
    userStore.setTheme({
      headerBg: '#fff',
      headerText: '#333',
      asideBg: '#fff',
      asideText: '#333',
      asideHover: '#f5f7fa',
      asideActive: '#409eff'
    })
  }
  const confirm = () => {
    emit('confirm', theme.value)
  }
</script>

<style scoped>
  :deep(.el-drawer .el-drawer__header) {
    padding: 0 15px !important;
    height: 50px;
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--el-border-color);
    color: var(--el-text-color-primary);
  }
  .setting-bar-flex {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  .setting-bar-flex-label {
    flex: 1;
    color: var(--el-text-color-primary);
  }
  .copy-config {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
  }
  .config-btn {
    width: 100%;
    margin-top: 15px;
  }
  .config-btn + .config-btn {
    margin-left: 0;
  }
</style>
